<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="批量设置"
    width="1200px"
    @close="handleClose"
    :append-to-body="true"
    custom-class="dialog-copy"
  >
    <div class="multiple-table-set">
      <el-table
        ref="multipleTable"
        :data="multipleList"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{ background: '#eff3f8', color: '#333' }"
        stripe
        size="small"
        :default-sort="{ prop: 'date', order: 'descending' }"
        max-height="700"
        highlight-selection-row
        border
      >
        <el-table-column
          label="项目ID"
          width="150"
          align="center"
          prop="projectName"
        >
        </el-table-column>
        <el-table-column label="设备名称" min-width="120" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.projectAdmin"
              :class="{ 'is-empty': !scope.row.projectAdmin }"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="安装位置"
          min-width="150"
          align="center"
          prop="onlineNum"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.onlineNum"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注信息" min-width="150" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.remark"
              type="textarea"
              autosize
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "DialogAdmin",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    field: {
      type: String,
      default: () => "",
    },
    multipleSelection: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      ruleForm: {
        name: "",
      },
      multipleList: [],
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value; // 返回父组件通过 v-model 传递的值
      },
      set(val) {
        this.$emit("close", val); // 当 dialogVisible 变化时，通知父组件更新
      },
    },
  },
  watch: {
    multipleSelection: {
      handler(val) {
        this.multipleList = JSON.parse(JSON.stringify(val));
      },
      deep: true,
    },
  },
  methods: {
    handleClose() {
      this.dialogVisible = false; // 关闭弹窗
      this.$emit("close"); // 发送关闭事件给父组件
    },
    handleConfirm() {
      // 校验设备名称是否为空
      const hasEmptyName = this.multipleList.some(
        (item) => !item.projectAdmin || item.projectAdmin.trim() === ""
      );

      if (hasEmptyName) {
        this.$message.error("设备名称不能为空");
        return;
      }

      // 校验通过，关闭弹窗
      this.dialogVisible = false;
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss">
.multiple-table-set {
  margin-bottom: 30px;
  /* 添加为空时的样式提示 */
  .is-empty .el-input__inner {
    border-color: #f56c6c !important;
  }
}
</style>
